<template>
  <div>
    <!-- 顶部数据区块 -->
    <TopData @clickKeyWord="changeKeyWord" />
  </div>
  <a-row class="mt_20" :gutter="[12, 12]">
    <a-col :xs="24" :lg="12" :xl="12">
      <!-- 网站排名区块 -->
      <WebsiteRanking :keyword="keyword" style="height: 40vh" />
    </a-col>
    <a-col :xs="24" :lg="12" :xl="12">
      <!-- 竞争趋势区块 -->
      <CompetitiveTrend :keyword="keyword" style="height: 40vh" />
    </a-col>
    <a-col :xs="24" :lg="12" :xl="12">
      <!-- 相关词区块 -->
      <RelatedWord :keyword="keyword" style="height: 40vh" />
    </a-col>
    <a-col :xs="24" :lg="12" :xl="12">
      <!-- 指数词区块 -->
      <ExponentialWord :keyword="keyword" style="height: 40vh" />
    </a-col>
    <!-- 百度指数区块 -->
    <BaiduIndex />
    <!-- 资讯指数区块 -->
    <InformationIndex />
    <!-- 需求图谱区块 -->
    <DemandMap style="height: 40vh" />
    <!-- 相关词区块 -->
    <RelatedWordTab />
    <!-- 地域分布 -->
    <RegionalDistribution />
    <!-- 人群属性 -->
    <CrowdAttribute />
    <!-- 地域分布 -->
    <InterestDistribution />
  </a-row>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import TopData from "./components/TopData";
import WebsiteRanking from "./components/WebsiteRanking";
import CompetitiveTrend from "./components/CompetitiveTrend";
import RelatedWord from "./components/RelatedWord";
import ExponentialWord from "./components/ExponentialWord";
import BaiduIndex from "./components/BaiduIndex";
import InformationIndex from "./components/InformationIndex";
import DemandMap from "./components/DemandMap";
import RelatedWordTab from "./components/RelatedWordTab";
import RegionalDistribution from "./components/RegionalDistribution";
import CrowdAttribute from "./components/CrowdAttribute";
import InterestDistribution from "./components/InterestDistribution";

let keyword = ref('')
// 更换关键词
function changeKeyWord(e){
  // console.log(e)
  keyword.value = e
}
</script>

<style lang="less" scoped></style>
